<template>
  <el-dialog
    :class="fullscreen ? 't-dialog--fullscreen' : 't-dialog'"
    :fullscreen="fullscreen"
    v-model="dialogVisible"
    :close-on-click-modal="false"
    class="view-dialog"
    width="75%"
    :show-close="false"
    :style="{ top: fullscreen ? '0' : '20px' }"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="t__dialog__header">
        <span
          class="el-dialog__title"
          :id="titleId"
          :class="titleClass"
        >
          {{ dialogTitle }}
        </span>
        <div class="t__dialog__menu">
          <el-icon :size="25">
            <i
              class="iconfont el-dialog__close"
              :class="fullscreen ? 'icon-tuichuquanping' : 'icon-fullscreen'"
              @click="handleFullScreen"
            />
          </el-icon>

          <el-icon
            class="el-icon--left"
            @click="close"
            :size="18"
          >
            <ele-Close />
          </el-icon>
        </div>
      </div>
    </template>

    <div class="dialog-form">
      <div class="left">
        <div class="toolbar">
          <el-button
            text
            type="primary"
            icon="ele-Printer"
            v-if="checkBtnPerms('print')"
            v-print="printForm"
            size="default"
          >
            {{ $t("form.data.printData") }}
          </el-button>

          <print-template-list
            v-if="checkBtnPerms('print')"
            :data-ids="[currentFormModel?.id]"
            ref="printTemplateListRef"
          ></print-template-list>

          <print-poster-list
            v-if="checkBtnPerms('print')"
            :data-ids="[currentFormModel?.id]"
            ref="printPosterListRef"
          ></print-poster-list>
          <el-button
            text
            type="primary"
            size="default"
            icon="ele-Share"
            @click="handleShowDataShare"
          >
            {{ $t("form.data.shareData") }}
          </el-button>
          <el-button
            v-if="isEditMode"
            type="primary"
            size="default"
            icon="ele-Check"
            @click="handleUpdate"
          >
            {{ $t("form.viewOrUpdate.confirm") }}
          </el-button>
          <el-button
            v-if="isEditMode"
            size="default"
            bg
            text
            icon="ele-Close"
            @click="handleCancel"
          >
            {{ $t("form.viewOrUpdate.cancel") }}
          </el-button>
          <el-button
            v-if="!isEditMode && canUpdate"
            icon="ele-Edit"
            text
            size="default"
            type="primary"
            @click="handleEditMode"
          >
            {{ $t("form.viewOrUpdate.modify") }}
          </el-button>
          <el-button
            v-if="openReply"
            text
            size="default"
            type="primary"
            icon="ele-ChatLineSquare"
            @click="emit('openReply')"
          >
            {{ $t("form.viewOrUpdate.reply") }}
          </el-button>
          <el-button
            v-if="checkBtnPerms('delete')"
            type="danger"
            text
            size="default"
            icon="ele-Delete"
            @click="handleDelete"
          >
            {{ $t("form.viewOrUpdate.delete") }}
          </el-button>
          <div class="page-wrap">
            <el-icon @click="handlePageChange(-1)">
              <ele-ArrowLeft />
            </el-icon>
            {{ currentDataIndex }}/{{ dataList.length }}
            <el-icon @click="handlePageChange(1)">
              <ele-ArrowRight />
            </el-icon>
          </div>
        </div>
        <div class="form-content">
          <generate-form
            v-if="formConf.fields.length && currentFormModel && isEditMode"
            ref="generateFormRef"
            :form-conf="formConf"
            :page-form-model="currentFormModel"
            :show-hidden-field="true"
            style="margin-bottom: 40px"
          />
          <div v-else>
            <exam-result
              v-if="formType === 4 && dialogVisible"
              id="printForm"
              ref="examFormRef"
              :key="formParseKey"
              :data-id="currentFormModel['id']"
              style="margin-bottom: 40px"
              :show-dimension-report="!!dimensionConfig"
            />
            <view-data
              v-else
              id="printForm"
              v-model:is-print="isPrint"
              :fields="fields"
              :page-form-model="currentFormModel"
            />
          </div>
        </div>
      </div>
      <div class="right">
        <el-tabs v-model="activeName">
          <el-tab-pane
            :label="$t('form.viewOrUpdate.basicInformation')"
            name="info"
          >
            <el-scrollbar style="height: 800px">
              <data-basic-info
                :fixed-fields="fixedFields"
                :current-form-model="currentFormModel"
              />
              <data-remark
                :data-id="currentFormModel?.id"
                :form-key="formKey"
              />
            </el-scrollbar>
          </el-tab-pane>
          <el-tab-pane
            :label="$t('form.data.updateInfo')"
            name="update"
          >
            <data-logs
              :id="currentFormModel?.id"
              v-if="dialogVisible"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <data-share ref="dataShareRef" />
  </el-dialog>
</template>

<script name="ViewOrUpdate" setup>
import { defineProps } from "vue";
import print from "vue3-print-nb";
import { loadAsyncComponent } from "@/utils/asyncComponent";
import GenerateForm from "@/views/formgen/components/GenerateForm/GenerateForm.vue";
import ExamResult from "@/views/form/exam/ExamResult.vue";
import ViewData from "./ViewData.vue";
import { useDataViewOrUpdate, viewOrUpdateEmits, viewOrUpdateProps } from "@/views/form/data/view/useDataViewOrUpdate";

const PrintPosterList = loadAsyncComponent(() => import("../table/PrintPosterList.vue"));
const PrintTemplateList = loadAsyncComponent(() => import("../table/PrintTemplateList.vue"));
const DataRemark = loadAsyncComponent(() => import("./components/DataRemark.vue"));
const DataShare = loadAsyncComponent(() => import("./components/DataShare.vue"));
const DataLogs = loadAsyncComponent(() => import("./components/DataLogs.vue"));
const DataBasicInfo = loadAsyncComponent(() => import("@/views/form/data/view/DataBasicInfo.vue"));

const props = defineProps({
  ...viewOrUpdateProps
});

const emit = defineEmits(viewOrUpdateEmits);

const vPrint = print;

const {
  handleShowDataShare,
  handleDelete,
  handleUpdate,
  formType,
  currentFormModel,
  dialogVisible,
  dialogTitle,
  activeName,
  isEditMode,
  formParseKey,
  formConf,
  isPrint,
  fullscreen,
  openReply,
  printForm,
  checkBtnPerms,
  dimensionConfig,
  dataList,
  handlePageChange,
  currentDataIndex,
  showDialog,
  handleCancel,
  handleEditMode,
  handleFullScreen,
  dataShareRef,
  generateFormRef
} = useDataViewOrUpdate(props, emit);

defineExpose({
  showDialog
});
</script>

<style lang="scss" scoped>
.view-dialog {
  height: 100%;
}

.dialog-form {
  height: 80vh;
  display: flex;
  margin-top: 5px;
  justify-content: center;

  .left {
    height: 100%;
    width: 75%;
  }

  .form-content {
    height: 100%;
    width: 100%;
    overflow: auto;
  }

  .form-content {
    overflow-y: auto;
  }

  .toolbar {
    display: flex;
    margin-bottom: 10px;
    margin-top: 5px;
    flex-wrap: wrap;

    .el-icon {
      color: var(--el-color-primary);
      cursor: pointer;
    }

    .page-wrap {
      user-select: none;
      margin-left: auto;
      display: flex;
      align-items: center;

      .el-icon {
        margin: 0 10px;
      }
    }
  }

  .right {
    height: 100%;
    width: 25%;
    overflow-y: scroll;
    padding-left: 10px;
  }
}

.el-icon--left :hover {
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
  transform: rotate(180deg);
}

.el-icon--left :not(:hover) {
  transition: transform 0.3s ease; /* 添加过渡效果，使旋转平滑 */
  transform: rotate(0deg); /* 鼠标离开后缓慢转回原始状态 */
}

.operate-btns {
  border-bottom: 1px solid #f0f0f0;
}

:deep(.exam-result-wrap .exam-result-wrap__card) {
  width: 90% !important;
}

:deep(.exam-result-wrap) {
  height: 100%;
  overflow: inherit !important;
}

.t__dialog__header {
  margin-top: 10px;

  .el-dialog__title {
    margin-left: 20px;
  }
}
</style>
<style lang="scss">
.view-dialog {
  --el-dialog-padding-primary: 0;
}
</style>
